<template>
  <div class="login">
    <!-- logo -->
    <div class="login-top">
      <img src="../../assets/logo.jpg" alt />
      <p class="animate__animated animate__backInDown">欢迎回来</p>
    </div>
    <!-- 表单 -->
    <van-form @submit="onSubmit" class="login-form">
      <van-field
        v-model="loginName"
        name="账号"
        label="账号"
        placeholder="账号"
        :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="checkbox">
        <van-checkbox v-model="checked" checked-color="#07c160" class="remember">记住密码</van-checkbox>
        <router-link to="/forget">忘记密码</router-link>
      </div>
      <router-link to="/registered">
        <div class="registered">
          <a href>还没有账号，快速注册一个吧</a>
        </div>
      </router-link>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="login">登陆</van-button>
      </div>
    </van-form>
    <!-- 登陆 -->
  </div>
</template>
<script>
import {login} from '../../api/forum-api'
//import {checkInfo} from '../../api/forum-api.js'
export default {
  data() {
    return {
      loginName: "",
      password: "",
      checked: false
    };
  },
  created() {
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      
    },
    login(){
      login(this.loginName,this.password).then(res=>{
        console.log(res)
        console.log(res.code);
        if(res.code===0){
          // this.$stroe.commit("changeIsLogin",{isLogin:true})
          this.$store.commit("changeIsLogin",{isLogin:true})
          this.$router.push('/mine')
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
.login {
  .login-top {
    width: 70%;
    height: 120px;
    margin: auto;
    text-align: center;
    margin-top: 30px;
    img {
      width: 50%;
      border-radius: 50%;
    }
    p {
      margin-top: 0;
      font-family: "华文行楷";
    }
  }
  .login-form {
    margin-top: 40px;
    .checkbox {
      margin-top: 20px;
      padding: 10px 36px;
      display: flex;
      font-size: 14px;
      .remember {
        flex: 5;
      }
      a {
        // margin-left: 30px;
        flex: 5;
        color: #323233;
        text-decoration: underline;
      }
    }
    .registered {
      padding: 10px 36px;
      text-align: center;
      font-size: 12px;
      text-decoration: underline;
      color: #323233;
    }
  }
}
</style>